import React, { PropTypes } from 'react'

import { Form, Button, Row, Col,DatePicker, Radio} from 'antd'
const echarts = require('echarts');

class chartDayTop extends React.Component {
  constructor (props) {
    super(props)

  }
  
  color1(){
      return ['rgb(0, 228, 0)','rgb(255,255,0)','rgb(255,126,0)','rgb(255,0,0)','rgb(153,0,76)','rgb(64,181,197)']
  }
  color2(){
      return ['rgb(0, 228, 0)','rgb(255,255,0)','rgb(255,126,0)','rgb(255,0,0)','rgb(153,0,76)','rgb(126,0,35)']
  }
  legend1(){
    return ["SO2","NO2","CO","O3","PM2.5","PM10"]
  }
  legend2(){
    return ["优","良","轻度污染","中度污染","重度污染","严重污染"]
  }

  seriesData1(){

  }
  seriesData2(){

  }
  initEcharts(){
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('chart-day-top1'));
    const myChart2 = echarts.init(document.getElementById('chart-day-top2'));
    const {dataSource} = this.props;
    let data1 = [];
    let data2 = [];
    let color1=[];
    let color2=[];
    if (dataSource){
          let SO2=0,NO2=0,CO=0,PM25=0,O3=0,PM10=0;
          let SOday=0,NOday=0,COday=0,PM25day=0,Oday=0,PMday=0;
          if (dataSource.day.ISO2){
            SO2 = dataSource.day.ISO2
          }
          if (dataSource.day.INO2){
            NO2 = dataSource.day.INO2
          }
          if (dataSource.day.ICO){
            CO = dataSource.day.ICO
          }
          if (dataSource.day.IO3){
            O3 = dataSource.day.IO3
          }
          if (dataSource.day.IPM25){
            PM25 = dataSource.day.IPM25
          }
          if (dataSource.day.IPM10){
            PM10 = dataSource.day.IPM10
          }
          data1 = new Array();
        if(SO2>0){
            data1.push({name:"SO2",value:SO2})
            color1.push("rgb(0, 228, 0)")
        }
        if(NO2>0){
            data1.push({name:"NO2",value:NO2})
            color1.push("rgb(255,255,0)")
        }
        if(CO>0){
            data1.push({name:"CO",value:CO})
            color1.push("rgb(255,126,0)")
        }
        if(O3>0){
            data1.push({name:"O3",value:O3})
            color1.push("rgb(255,0,0)")
        }
        if(PM25>0){
            data1.push({name:"PM2.5",value:PM25})
            color1.push("rgb(153,0,76)")
        }
        if(PM10>0){
            data1.push({name:"PM10",value:PM10})
            color1.push("rgb(64,181,197)")
        }
        
            if (dataSource.qualityAir.优){
              SOday = dataSource.qualityAir.优
            }
            if (dataSource.qualityAir.良){
              NOday = dataSource.qualityAir.良
            }
            if (dataSource.qualityAir.轻度污染){
              COday = dataSource.qualityAir.轻度污染
            }
            if (dataSource.qualityAir.中度污染){
              Oday = dataSource.qualityAir.中度污染
            }
            if (dataSource.qualityAir.重度污染){
              PM25day = dataSource.qualityAir.重度污染
            }
            if (dataSource.qualityAir.严重污染){
              PMday = dataSource.qualityAir.严重污染
            }

            if (dataSource.qualityAir.轻度){
              COday = dataSource.qualityAir.轻度
            }
            if (dataSource.qualityAir.中度){
              Oday = dataSource.qualityAir.中度
            }
            if (dataSource.qualityAir.重度){
              PM25day = dataSource.qualityAir.重度
            }
            if (dataSource.qualityAir.严重){
              PMday = dataSource.qualityAir.严重
            }
           data2 = new Array()
           if(SOday>0){
               data2.push({value:SOday, name:'优'})
               color2.push("rgb(0, 228, 0)")
           }
           if(NOday>0){
               data2.push({value:NOday, name:'良'})
               color2.push("rgb(255,255,0)")
           }
           if(COday>0){
               data2.push({value:COday, name:'轻度污染'})
               color2.push("rgb(255,126,0)")
           }
           if(Oday>0){
               data2.push({value:Oday, name:'中度污染'})
               color2.push("rgb(255,0,0)")
           }
           if(PM25day>0){
               data2.push({value:PM25day, name:'重度污染'})
               color2.push("rgb(153,0,76)")
           }
           if(PMday>0){
               data2.push({value:PMday, name:'严重污染'})
               color2.push("rgb(126,0,35)")
           }
    }
    const options1={
        title : {
            text: '首要污染物统计',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: this.legend1()
        },
        color:color1,
        series : [
            {
                name: '首要污染物',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                label:{
                    normal:{
                        textStyle:{
                            color:'black'
                        }
                    }
                },
                data:data1,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }

            }
        ]
    };
    const options2={
        title : {
            text: '空气质量类别统计',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: this.legend2()
        },
        color:color2,
        series : [
            {
                name: '空气质量类别',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                label:{
                    normal:{
                        textStyle:{
                            color:'black'
                        }
                    }
                },
                data:data2,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(options1);
    myChart2.setOption(options2);
  }
  shouldComponentUpdate(nextProps,nextState){
   
      return nextProps.timestamp!=this.props.timestamp
  }
  componentDidUpdate(){
      
      if(Object.keys(this.props.dataSource.day).length>0){
            this.initEcharts()
        }
      
  }
  componentDidMount(){

      window.requestAnimationFrame(function() {
        if(Object.keys(this.props.dataSource.day).length>0){
            this.initEcharts()
        }
      }.bind(this))
  }
  render(){

    if(Object.keys(this.props.dataSource.day).length==0){
           return (<Row gutter={24}></Row>)
        }
    return (
    
      <Row gutter={24}>
        <Col lg={12} md={12} sm={12} xs={24}>
            <div id='chart-day-top1' style={{width:'100%',height:'240px',marginLeft:'auto',marginRight:'auto'}}></div>
        </Col>
        <Col lg={12} md={12} sm={12} xs={24}>
            <div id='chart-day-top2' style={{width:'100%',height:'240px',marginLeft:'auto',marginRight:'auto'}}></div>
        </Col>
      </Row>
    )
  }
}



chartDayTop.propTypes = {

};

export default chartDayTop
